<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>研究生</el-breadcrumb-item>
      <el-breadcrumb-item>课程发布</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-select v-model="value" placeholder="文章状态" @change="getValue">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div style="display:inline">
        <el-button type="button" @click="dialogVisible = true" style=""
          >新增课程</el-button
        >
        <el-dialog
          title="新增"
          :visible.sync="dialogVisible"
          width="50%"
          align="center"
          :before-close="handleDialogClose"
        >
          <el-form :model="form">
            <el-form-item label="课程名称" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程描述" :label-width="formLabelWidth">
              <el-input v-model="form.desc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程封面" :label-width="formLabelWidth">
              <el-upload
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
                :http-request="handleUpload"
                :file-list="[]"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="handleDialogClose">取 消</el-button>
            <el-button type="primary" @click="addCourse">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div
        style="display:inline"
        class="item"
        effect="dark"
        content="Top Center 提示文字"
        placement="top"
        v-if="courseStatus === 2"
      >
        由于你发布的课程不符合要求，因此无法通过，请修改后重新提交
      </div>
      <el-table
        :data="allCourse"
        border
        style="width: 100%"
        class="courseTable"
      >
        <el-table-column type="index" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="课程名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="desc"
          label="课程描述"
          width="120"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="desc" label="封面" align="center">
          <template width="40" slot-scope="scope">
            <img style="border:none;max-width:100%" :src="scope.row.coverUrl" />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="hits" label="点击量" width="100" align="center">
        </el-table-column>
        <el-table-column prop="status" label="操作" width="400" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteCourse(scope.$index, scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="editCourseDetailInfo(scope.row)"
              v-if="courseStatus === 0 || courseStatus === 2"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="primary"
              v-if="courseStatus === 0 || courseStatus === 2"
              @click="commitCourse(scope.row.id)"
            >
              提交审核
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="showCourseSection(scope.row.id)"
            >
              课程章节详情
            </el-button>
            <!-- 编辑 -->
            <el-dialog
              title="编辑"
              :visible.sync="editDialogVisible"
              width="50%"
            >
              <el-form :model="tempForm">
                <el-form-item label="课程名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="tempForm.title"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="课程描述" :label-width="formLabelWidth">
                  <el-input
                    v-model="tempForm.desc"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="课程封面"
                  :label-width="formLabelWidth"
                  style="text-align:left"
                >
                  <el-upload
                    action=""
                    :before-remove="beforeRemove"
                    :limit="1"
                    :on-exceed="handleExceed"
                    :http-request="handleUpdate"
                    :file-list="tempForm.tempFile"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-form>

              <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateCourse"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
            <!-- 提交审核 -->
            <el-dialog
              title="提示"
              :visible.sync="commitDialogVisible"
              width="30%"
            >
              <span>确认提交审核</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmCommit"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="4"
        layout="total, prev, pager, next"
        :total.sync="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  ReqListCourseByUserId,
  ReqAddCourse,
  ReqDeleteCourseById,
  ReqUpdateCourse,
  ReqSubmitCourseIdentity,
} from "../../request/index.js";

export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "未发布",
        },
        {
          value: "1",
          label: "审核中",
        },
        {
          value: "2",
          label: "未通过",
        },
        {
          value: "3",
          label: "通过",
        },
      ],
      value: "0",
      courseStatus: 0,

      userId: "", //用户id

      //课程分页相关
      allCourse: [], //数据
      total: 0, //总共数量
      totalPages: 0, //总共页数
      currentPage: 1, //当前页
      num: 4, //一页多少

      //新增课程
      form: {
        title: "",
        desc: "",
        tempUploadFile: {},
      },
      dialogVisible: false, //新建Dialog
      formLabelWidth: "120px",

      //编辑课程
      editDialogVisible: false, //编辑Dialog
      tempForm: {
        courseId: "",
        title: "",
        desc: "",
        // tempUploadFile: {},
        tempFile: [],
      },

      //提交审核课程
      commitDialogVisible: false, //提交审核Dialog
      tempCourseId: "",
    };
  },
  methods: {
    editCourseDetailInfo(row) {
      this.editDialogVisible = true;
      this.tempForm.title = row.name;
      this.tempForm.desc = row.desc;
      this.tempForm.courseId = row.id;
      this.tempForm.tempFile = [
        {
          name: row.coverName,
          url: row.coverUrl,
        },
      ];
    },
    getValue(id) {
      this.courseStatus = parseInt(id);
      ReqListCourseByUserId({
        num: this.num,
        begin: this.currentPage,
        userId: this.userId,
        status: this.courseStatus,
      }).then((res) => {
        this.allCourse = res.data.records;
        this.totalPages = res.data.pages;
        this.total = res.data.total;
        this.currentPage = res.data.current;
      });
    },
    //-------------------上传文件函数-------------------
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file, fileList) {
      console.log(file, fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUpload(file, fileList) {
      this.form.tempUploadFile = file.file;
    },
    handleUpdate(file, fileList) {
      this.tempForm.tempUploadFile = file.file;
      console.log(this.tempForm);
    },

    //课程相关接口
    //添加课程
    addCourse() {
      this.dialogVisible = false;
      //调用接口
      ReqAddCourse({
        title: this.form.title,
        desc: this.form.desc,
        cover: this.form.tempUploadFile,
      }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success",
          });
          this.form = {};
          this.getValue(this.courseStatus);
        } else {
          this.$message({
            showClose: true,
            message: "添加失败",
            type: "warning",
          });
        }
      });
    },
    handleDialogClose() {
      this.dialogVisible = false;
    },
    //更新课程
    updateCourse() {
      this.editDialogVisible = false;
      //调用接口
      ReqUpdateCourse(this.tempForm).then((res) => {
        if ((res.msg = "成功")) {
          // location.reload();
          this.$message({
            showClose: true,
            message: "更新成功",
            type: "success",
          });
          this.tempForm = {};
          this.getValue(this.courseStatus);
        } else {
          this.$message({
            showClose: true,
            message: "更新失败",
            type: "warning",
          });
        }
      });
    },
    //删除数据
    deleteCourse(val, rowId) {
      ReqDeleteCourseById({ id: rowId }).then((res) => {
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "删除失败",
            type: "warning",
          });
        }
        this.getValue(this.courseStatus);
      });
    },
    //分页
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      ReqListCourseByUserId({
        num: this.num,
        begin: this.currentPage,
        userId: this.userId,
        status: this.courseStatus,
      }).then((res) => {
        this.allCourse = res.data.records;
        this.totalPages = res.data.pages;
        this.total = res.data.total;
        this.currentPage = res.data.current;
      });
    },

    //提交审核课程
    commitCourse(rowId) {
      this.commitDialogVisible = true;
      this.tempCourseId = rowId;
    },

    confirmCommit() {
      ReqSubmitCourseIdentity({ courseId: this.tempCourseId }).then((res) => {
        this.commitDialogVisible = false;
        if ((res.msg = "成功")) {
          this.$message({
            showClose: true,
            message: "提交成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "失败",
            type: "warning",
          });
        }
        this.tempCourseId = "";
        this.getValue(this.courseStatus);
      });
    },

    //课程章节相关接口
    showCourseSection(rowId) {
      this.$router.push({
        name: "courseSection",
        params: { courseId: rowId, courseStatus: this.courseStatus },
      });
    },
  },
  created() {
    this.userId = window.sessionStorage.getItem("userId");
    ReqListCourseByUserId({
      num: this.num,
      begin: this.currentPage,
      userId: this.userId,
      status: this.courseStatus,
    }).then((res) => {
      this.allCourse = res.data.records;
      this.totalPages = res.data.pages;
      this.total = res.data.total;
      this.currentPage = res.data.current;
    });
  },
};
</script>

<style scoped>
.el-select {
  width: 110px;
}
.courseTable {
  margin-top: 10px;
}
</style>
